<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>银行卡管理</title>
	<style type="text/css">
	</style>
</head>
<body>
<div th:replace="common/header::html"></div>
<div id="q-app">
	<q-dialog persistent v-model="showAddDialogFlag">
		<q-card style="min-width: 350px;">
			<q-card-section class="row items-center q-pb-none">
				<div class="text-h6">新增银行卡</div>
				<q-space></q-space>
				<q-btn icon="close" flat round dense v-close-popup></q-btn>
			</q-card-section>
			<q-card-section class="q-pt-none">
				<q-form class="q-gutter-md">
					<q-input outlined v-model="newBankCard.bankCardNumber" label="卡号" :dense="true"></q-input>
					<q-input outlined v-model="newBankCard.bankCardAddress" label="开户行" :dense="true"></q-input>
					<q-input outlined v-model="newBankCard.holderName" label="持卡人姓名" :dense="true"></q-input>
					<q-input outlined v-model="newBankCard.holderPhone" label="联系手机号" :dense="true"></q-input>
				</q-form>
			</q-card-section>
			<q-card-actions align="right">
				<q-btn label="保存" color="primary" @click="addBankCard"></q-btn>
			</q-card-actions>
		</q-card>
	</q-dialog>

	<q-dialog persistent v-model="showEditDialogFlag">
		<q-card style="min-width: 350px;">
			<q-card-section class="row items-center q-pb-none">
				<div class="text-h6">编辑银行卡</div>
				<q-space></q-space>
				<q-btn icon="close" flat round dense v-close-popup></q-btn>
			</q-card-section>
			<q-card-section class="q-pt-none">
				<q-form class="q-gutter-md">
					<q-input outlined v-model="editBankCard.bankCardNumber" label="卡号" :dense="true" readonly></q-input>
					<q-input outlined v-model="editBankCard.bankCardAddress" label="开户行" :dense="true"></q-input>
					<q-input outlined v-model="editBankCard.holderName" label="持卡人姓名" :dense="true"></q-input>
					<q-input outlined v-model="editBankCard.holderPhone" label="联系手机号" :dense="true"></q-input>
				</q-form>
			</q-card-section>
			<q-card-actions align="right">
				<q-btn label="保存" color="primary" @click="updateBankCard"></q-btn>
			</q-card-actions>
		</q-card>
	</q-dialog>

	<div class="q-pa-md">
		<q-table color="primary" :data="tableData" :columns="tableColumns" :pagination.sync="tablePagination" :rows-per-page-options="[10, 30, 50, 100]" hide-pagination :loading="tableDataLoading" @request="loadTableData">
			<template v-slot:top-right>
				<div class="q-gutter-md row">
					<q-btn outline color="primary" label="新增银行卡" @click="showAddDialog"></q-btn>
				</div>
			</template>
			<template v-slot:body-cell-createTime="props">
				<q-td :props="props">
					{{ formatDate(props.row.createTime) }}
				</q-td>
			</template>
			<template v-slot:body-cell-action="props">
				<q-td :props="props">
					<div class="q-gutter-sm">
						<q-btn color="primary" label="编辑" @click="showEditDialog(props.row.id)"></q-btn>
						<q-btn-dropdown color="primary" label="更多">
							<q-list>
								<q-item clickable v-close-popup @click="deleteBankCard(props.row.id)">
									<q-item-section>
										<q-item-label>删除银行卡</q-item-label>
									</q-item-section>
								</q-item>
							</q-list>
						</q-btn-dropdown>
					</div>
				</q-td>
			</template>
			<template v-slot:loading>
				<q-inner-loading showing color="primary"></q-inner-loading>
			</template>
		</q-table>
	</div>
</div>
<script src="/js/bank-management.js"></script>